WD PLUS 2020-11 (dashboard)

6. Praktyka JavaScriptu (Moduł)

6.3. Wyświetlanie artykułu po kliknięciu

Zadanie: Dokończenie handlera eventu

W tym submodule znalazło się kilka ćwiczeń – ich wykonanie jest elementem tego zadania. Pozostały nam też do napisania trzy fragmenty funkcji titleClickHandler – to będzie pozostała część tego zadania. Jeśli czujesz się na siłach, spróbuj wykonać je bez opisu, załączonego poniżej.

Ważne: do wykonania zadania z pewnością przyda Ci się funkcja getAttribute.

Pokaż opis rozwiązania Ukryj opis rozwiązania

Zajmijmy się po kolei fragmentami, które pozostały nam do uzupełnienia.

Pobranie atrybutu klikniętego linka

/* get 'href' attribute from the clicked link */

Umiemy już znaleźć kliknięty link – zapisaliśmy go w stałej clickedElement. Znajdziemy teraz jego atrybut href.

Zadeklarujmy nową stałą o nazwie articleSelector. Od razu możemy ustawić jej wartość, czyli wartość atrybutu href pobraną z klikniętego linka.

Spójrz na przykład znajdujący się w dokumentacji funkcji getAttribute – powinien podpowiedzieć Ci, w jaki sposób użyć tej funkcji. Pamiętaj, że musimy ją wykonać na elemencie clickedElement, a w nawiasach podać nazwę atrybutu w cudzysłowach, czyli href.

Użyj console.log dla stałej articleSelector, aby sprawdzić, czy udało się pobrać wartość tego atrybutu. Powinna być inna dla każdego linka, i wyświetlać się w konsoli po kliknięciu w link.

image

Wyszukanie właściwego artykułu

/* find the correct article using the selector (value of 'href' attribute) */

W stałej articleSelector mamy już zapisaną wartość atrybutu href klikniętego linka. Jak pamiętasz, href każdego linka był identyczny, jak id odpowiadającego mu artykułu. Czas to wykorzystać!

Zadeklaruj nową stałą o nazwie targetArticle. Jako jej wartość ustawimy odwołanie do artykułu. Do tej pory używaliśmy do tego querySelectorAll, ale skoro teraz szukamy tylko jednego elementu, możemy skorzystać z funkcji querySelector. Działa dokładnie tak samo, ale zwróci pojedynczy element, a nie kolekcję elementów (która działa inaczej, nawet jeśli zawiera w sobie tylko jeden element).

Innymi słowy: jako wartość stałej targetArticle ustaw querySelector, wyszukujący artykuł o danym atrybucie href. Może się to wydawać zagmatwane, ale w rzeczywistości jest bardzo proste – znaleźliśmy ten artykuł w poprzednim punkcie i zapisaliśmy w stałej!

Ponownie użyj console.log, aby sprawdzić, czy udało się znaleźć właściwy artykuł. Po kliknięciu któregoś linka w lewej kolumnie, w konsoli powinien zostać wyświetlony odpowiadający mu artykuł.

image

Dodanie klasy active na znalezionym artykule

/* add class 'active' to the correct article */

Ostatni krok zadania to dodanie klasy active artykułowi, który zapisaliśmy w stałej targetArticle. Wystarczy, że skopiujesz kod, za pomocą którego ustawiliśmy klasę active dla klikniętego linka, i zmienisz w niej element, któremu dodajesz tę klasę.

Po wykonaniu tego kroku zadanie powinno być skończone i działać tak, jak opisaliśmy poniżej.

Oczekiwany efekt zadania

Efektem tego zadania powinna być strona z blogiem, na której kliknięcie w którykolwiek link w lewej kolumnie powoduje:

  • usunięcie podświetlenia linka, który do tej pory był aktywny,
  • dodanie podświetlenia klikniętego linka,
  • ukrycie artykułu, który do tej pory był widoczny w środkowej kolumnie,
  • wyświetlenie w środkowej kolumnie artykułu powiązanego z klikniętym linkiem.
image

Wskazówka

Możesz łatwo sprawdzić w Inspektorze, czy nadawanie i usuwanie klasy przy kliknięciu działa jak należy. Kiedy napiszesz skrypt, zbadaj Inspektorem link na liście postów. Klikaj link na stronie, a w Inspektorze obserwuj, czy zmienia się jego klasa:

image

Po skończonej pracy

Przeczytaj jeszcze raz cały kod swojego skryptu i zapisz sobie wszystko, czego nie rozumiesz. Będzie to świetna lista pytań na spotkanie z Mentorem!

Nie zapomnij o zapisaniu commita, wypchnięciu go na zdalne repozytorium, oraz wysłaniu linka do najnowszego commita do sprawdzenia!

;